<template>
  <div id="app">
    <main-tab-bar v-if='!$route.meta.showTab'></main-tab-bar>
    <transition :name="transitionName">
      <keep-alive>
       <router-view  class="child-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
  import MainTabBar from "./components/mainTabbar/MainTabBar";
export default {
  name: 'App',
  components: {MainTabBar},
  data(){
    return{
      transitionName: ''
    }
  },
  created(){
    this.$store.dispatch('getdata')
  },
  watch: {
    '$route'(to, from) {
      if(to.meta.index > from.meta.index){
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>

<style lang="less">
@import "assets/css/reset.css";

/*.child-view {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  top: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);*/
/*}*/
/*.slide-left-enter,*/
/*.slide-right-leave-active {*/
/*  opacity: 0;*/
/*  -webkit-transform: translate(50px, 0);*/
/*  transform: translate(50px, 0);*/
/*}*/
/*.slide-left-leave-active,*/
/*.slide-right-enter {*/
/*  opacity: 0;*/
/*  -webkit-transform: translate(-50px, 0);*/
/*  transform: translate(-50px, 0);*/
/*}*/

.wrapper{
  height: 100%;
}
</style>
